<template>
    <div class="menu-tree">
        <el-tree
                class="tree-border"
                :data="menuList"
                show-checkbox
                default-expand-all
                ref="menu"
                node-key="id"
                :check-strictly="true"
                :default-checked-keys="role.menu"
                empty-text="暂无数据"
                :props="defaultProps"
        >
        <div class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <div style="margin-left: 80px; display: inline-block;">

            <el-checkbox-group
                    v-model="role.permission" style="width: 100%;white-space: normal;word-break: break-all;">
            <el-checkbox v-for="prem in data.menuPermission" :label="prem.id" :key="prem.id">{{prem.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
        </el-tree>
    </div>
</template>
<script>
    import {handleTree} from "@/utils/common";
    import eventBus from "@/utils/eventBus";
    import roleApi from "@/api/systemManagement/role/index";

    export default {
        name: "MenuTree",
        inheritAttrs: false,
        props: {
            row: {
                type: Object,
                default: function () {
                    return {};
                }
            },
            params:{
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        data() {
            return {
                defaultProps: {
                    children: "children",
                    label: "name"
                },
                menuList: [],
                role: {menu: [], permission: []},
                allList:[]
            }
        },
        computed: {},
        created() {
            this.getRoleMenu();
        },
        mounted() {
          eventBus.$on("role-menu", (role) => {
            this.role = role
            if (this.menuList && this.menuList.length > 0) {
              if (this.$refs["menu"]) {
                this.$refs["menu"].setCheckedNodes(role.menu)
              }
            }
          });
        },
        methods: {
            selectAll(){
                let permission =[]
                let menu = []
                    this.allList.map(item=>{
                        let menuPerIds = item.menuPermission.map(menuPer=>{
                            return menuPer.id
                        })
                        permission = permission.concat(menuPerIds)
                        menu.push(item.id)
                    })
                this.role.permission = [...new Set([...this.role.permission, ...permission])];
                this.$refs["menu"].setCheckedKeys(menu)
            },
            clearAll(){
                let permission =[]
                this.allList.map(item=>{
                    let menuPerIds = item.menuPermission.map(menuPer=>{
                        return menuPer.id
                    })
                    permission = permission.concat(menuPerIds)
                })
                this.role.permission = this.role.permission.filter(item => !permission.includes(item));
                this.$refs["menu"].setCheckedKeys([])
            },
            getRoleMenu() {
                roleApi.getRoleMenu(this.params).then(res => {
                    this.allList = res.data
                    this.menuList = handleTree(this.allList, "id", "parent");
                })
            },
            save() {
                let menus = []
                menus = this.role.menu.filter(item=>{
                    for(let i=0; i<this.allList.length; i++){
                        if(item==this.allList[i].id){
                            return false
                        }
                    }
                    return true
                })
                this.role.menu = menus.concat(this.$refs["menu"].getCheckedKeys())
                roleApi.editRoleMenu(this.role.id, this.role).then(response => {
                    this.msgSuccess("修改成功");
                });
            }
        }
    }

</script>
<style lang="scss" scoped>
    .menu-tree {
        margin: 0;
        height: calc(100vh - 280px);
        width: 100%;
        ::v-deep.el-tree-node__content{
            height: auto;
            align-items: flex-start;
        }
        ::v-deep.custom-tree-node{
            display: flex;
        }
        .el-checkbox{
            margin-bottom: 6px;
        }
    }
    .tree-border{
      border: none;
    }
</style>
